<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--sweetalert2-->
    <link href="./sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="./sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
</head>
<body>


<script>

//文件

    async  function fn(){
        const p =  Swal.fire({
            title: 'Select field validation',
            input: 'select',
            inputOptions: {
                'Fruits': {
                    apples: 'Apples',
                    bananas: 'Bananas',
                    grapes: 'Grapes',
                    oranges: 'Oranges'
                },
                'Vegetables': {
                    potato: 'Potato',
                    broccoli: 'Broccoli',
                    carrot: 'Carrot'
                },
                'icecream': 'Ice cream'
            },
            inputPlaceholder: 'Select a fruit',
            showCancelButton: true,
            inputValidator: (value) => {
                return new Promise((resolve) => {
                    if (value === 'oranges') {
                        resolve()
                    } else {
                        resolve('You need to select oranges :)')
                    }
                })
            }
        })


        console.log(p)

        if (p.fruit) {
            Swal.fire(`You selected: ${p.fruit}`)
        }
    }


    fn()
</script>
</body>
</html>